<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改用户信息</title>
    <link type="text/css" rel="stylesheet" href="../css/style.css"/>
    <script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../js/javascript.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/httpVueLoader.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
    <script type="text/javascript" src="../js/node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="userUpdateApp">
    <top-manage></top-manage>
    <div id="middle">
        <div id="position">
            您现在的位置是&nbsp;&gt;&nbsp;<a href="index-manage.html">管理后台</a>&nbsp;&gt;&nbsp;用户管理
        </div>
        <user-manage></user-manage>
        <div id="main">
            <div id="modifyuser">
                <h1>修改用户信息</h1>
                <table>
                    <tr>
                        <td align="right" style="width:80px;">用户名：</td>
                        <td style="width:270px;"><input type="text" size="30" placeholder="请输入您的用户名"
                                                        v-model="user.username"/></td>
                        <td><span></span></td>
                    </tr>
                    <tr>
                        <td align="right">密码：</td>
                        <td><input type="text" size="30" placeholder="请输入您的密码" v-model="user.password"/></td>
                        <td><span></span></td>
                    </tr>
                    <tr>
                        <td align="right">我的头像：</td>
                        <td><input type="file" @change="getFile($event)" v-text="user.picture"/>
                        </td>
                        <td><span></span></td>
                    </tr>
                    <tr>
                        <td align="right">姓名：</td>
                        <td><input type="text" size="30" placeholder="请输入您的真实姓名" v-model="user.name"/></td>
                        <td><span></span></td>
                    </tr>
                    <tr>
                        <td align="right">性别：</td>
                        <td>
                            <input type="radio" v-model="user.gender" value="1"/>男
                            <input type="radio" v-model="user.gender" value="0"/>女
                        </td>
                        <td><span></span></td>
                    </tr>
                    <tr>
                        <td align="right">出生日期：</td>
                        <td><input type="date" v-model="user.birthday"/></td>
                        <td><span></span></td>
                    </tr>
                    <tr>
                        <td align="right">电话号码：</td>
                        <td><input type="tel" size="30" placeholder="请输入您的手机号码" v-model="user.phone"/></td>
                        <td><span></span></td>
                    </tr>
                    <tr>
                        <td align="right" style="width:80px;">收货地址1</td>
                        <td style="width:270px;"><textarea name="address1" v-model="user.address1"></textarea></td>
                        <td><span></span></td>
                    </tr>
                    <tr>
                        <td align="right">收货地址2</td>
                        <td><textarea name="address2" v-model="user.address2"></textarea></td>
                        <td><span></span></td>
                    </tr>
                    <tr>
                        <td align="right">收货地址3</td>
                        <td><textarea name="address3" v-model="user.address3"></textarea></td>
                        <td><span></span></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="submit" value="确认修改" class="button" @click="updateUser()"/>
                        </td>
                        <td><span></span></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <bottom></bottom>
</div>
<script type="text/javascript">
    Vue.use(httpVueLoader);
    const app = new Vue({
        el: "#userUpdateApp",
        data: {
            user: {},
            file: {},
            // formData: {},
        },
        created() {
            this.user.id = window.location.search.slice(1);
            this.loadData();
        },
        methods: {
            loadData() {
                axios.get("/user/" + this.user.id).then(resp => {
                    this.user = resp.data;
                });
            },
            updateUser() {
                axios.post("/upload/image", {file:this.file}).then(resp => {
                    if (resp.status == 200) {
                        // axios.put("/user/", this.user).then(resp => {
                        //     location.href = "./user-list.html";
                        // });
                        alert("success");
                    }
                });
            },
            getFile(event) {
                let file = event.target.files[0];
                let fileName = file.name;
                let index = fileName.lastIndexOf(".");
                if (index != -1) {
                    let suffix = fileName.substr(index + 1).toLowerCase();
                    if (suffix == 'png' || suffix == 'jpg') {
                        this.file = file;
                    }
                }
            }
        },
        components: {
            'top-manage': 'url:../common/top-manage.vue',
            'bottom': 'url:../common/bottom.vue',
            'user-manage': 'url:../common/user-manage.vue',
        },
    });
</script>

</body>
</html>